<template>
  <div class="map-container">
    <div class="map-controls">
      <div class="control-title">地图展示</div>
      <el-button-group class="ml-2">
        <el-button size="small" @click="switchMapType('sentiment')" :type="currentMapType === 'sentiment' ? 'primary' : ''">
          情绪分布
        </el-button>
        <el-button size="small" @click="switchMapType('checkin')" :type="currentMapType === 'checkin' ? 'primary' : ''">
          签到分布
        </el-button>
        <el-button size="small" @click="switchMapType('spatial')" :type="currentMapType === 'spatial' ? 'primary' : ''">
          空间分布
        </el-button>
      </el-button-group>
      <div class="control-divider"></div>
      <el-button-group class="ml-2">
        <el-button size="small" @click="toggleHeatmap" :type="showHeatmap ? 'primary' : ''">
          热力图
        </el-button>
        <el-button size="small" @click="toggleLabels" :type="showLabels ? 'primary' : ''">
          地名
        </el-button>
      </el-button-group>
    </div>
    <div class="map-legend">
      <div class="legend-title">{{ legendTitle }}</div>
      <div class="legend-items">
        <div class="legend-item" v-if="currentMapType === 'sentiment'">
          <span class="color-block positive"></span>
          <span>正面</span>
        </div>
        <div class="legend-item" v-if="currentMapType === 'sentiment'">
          <span class="color-block negative"></span>
          <span>负面</span>
        </div>
        <div class="legend-item" v-if="currentMapType === 'sentiment'">
          <span class="color-block neutral"></span>
          <span>中性</span>
        </div>
        <div class="legend-item" v-if="currentMapType === 'checkin'">
          <span class="color-block high"></span>
          <span>高频区域</span>
        </div>
        <div class="legend-item" v-if="currentMapType === 'checkin'">
          <span class="color-block medium"></span>
          <span>中频区域</span>
        </div>
        <div class="legend-item" v-if="currentMapType === 'checkin'">
          <span class="color-block low"></span>
          <span>低频区域</span>
        </div>
        <div class="legend-item" v-if="currentMapType === 'spatial'">
          <span class="color-block cluster"></span>
          <span>聚集区域</span>
        </div>
        <div class="legend-item" v-if="currentMapType === 'spatial'">
          <span class="color-block scatter"></span>
          <span>分散区域</span>
        </div>
      </div>
    </div>
    <div ref="map" class="map"></div>
    <div class="map-info" v-if="selectedRegion">
      <div class="info-title">{{ selectedRegion.name }}</div>
      <div class="info-content">
        <div class="info-item" v-if="currentMapType === 'sentiment'">
          <span class="label">总舆情量：</span>
          <span class="value">{{ selectedRegion.total }}</span>
        </div>
        <div class="info-item" v-if="currentMapType === 'sentiment'">
          <span class="label">正面占比：</span>
          <span class="value">{{ selectedRegion.positive }}%</span>
        </div>
        <div class="info-item" v-if="currentMapType === 'sentiment'">
          <span class="label">负面占比：</span>
          <span class="value">{{ selectedRegion.negative }}%</span>
        </div>
        <div class="info-item" v-if="currentMapType === 'sentiment'">
          <span class="label">中性占比：</span>
          <span class="value">{{ selectedRegion.neutral }}%</span>
        </div>
        <div class="info-item" v-if="currentMapType === 'checkin'">
          <span class="label">签到总量：</span>
          <span class="value">{{ selectedRegion.checkins }}</span>
        </div>
        <div class="info-item" v-if="currentMapType === 'checkin'">
          <span class="label">日均签到：</span>
          <span class="value">{{ selectedRegion.dailyAvg }}</span>
        </div>
        <div class="info-item" v-if="currentMapType === 'spatial'">
          <span class="label">聚集指数：</span>
          <span class="value">{{ selectedRegion.clusterIndex }}</span>
        </div>
        <div class="info-item" v-if="currentMapType === 'spatial'">
          <span class="label">分散程度：</span>
          <span class="value">{{ selectedRegion.scatterLevel }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios'
import hefeiMap from '@/assets/map/hefei.json'

export default {
  name: 'HefeiMap',
  data() {
    return {
      map: null,
      tmap: null,
      mapKey: '80c23d8b26f4dce45deb342b1a95d7d2',
      currentMapType: 'sentiment',
      showHeatmap: false,
      showLabels: true,
      selectedRegion: null,
      heatmapData: []
    }
  },
  computed: {
    currentData() {
    },
    legendTitle() {
      const titles = {
        sentiment: '舆情分布',
        checkin: '签到分布',
        spatial: '空间分布'
      }
      return titles[this.currentMapType]
    }
  },
  async created() {
    echarts.registerMap('合肥', hefeiMap)
    this.generateHeatmapData()
  },
  mounted() {
    this.initMaps()
    window.addEventListener('resize', this.handleResize)
  },
  methods: {
     initMaps() {
      const script = document.createElement('script')
        script.src = `https://api.tianditu.gov.cn/api?v=4.0&tk=${this.mapKey}`
        document.head.appendChild(script)
        script.onload = () => {
          this.tmap = new window.T.Map(this.$refs.map)
          this.tmap.centerAndZoom(new window.T.LngLat(117.27, 31.86), 12)
          this.tmap.addLayer(new window.T.TileLayer.Vector())
          // Check if the Vector layer is available
          if (window.T.TileLayer.Vector) {
            this.tmap.addLayer(new window.T.TileLayer.Vector());
          } else {
            console.warn('Vector layer is not available in the current T map API version.');
          }

          // 添加 GeoServer 图层
          const geoServerLayer = new window.T.TileLayer.WMS('http://localhost:8081/geoserver/wb/wms', {
            layers: 'weibo_get_location',
            format: 'application/openlayers',
            transparent: true,
            version: '1.1.0'
          });

          // 检查图层是否成功添加
          geoServerLayer.on('load', () => {
            console.log('GeoServer layer loaded successfully');
          });

          geoServerLayer.on('error', (error) => {
            console.error('Error loading GeoServer layer:', error);
          });

          // Log the layer before adding it
          console.log('Adding GeoServer layer:', geoServerLayer);
          this.tmap.addLayer(geoServerLayer);
          resolve()
        }
      
    },   
  }
}
</script>

<style lang="scss" scoped>
.map-container {
  background: rgba(255, 255, 255, 0.1);
  padding: 10px;
  border-radius: 8px;
  height: calc(100% - 20px);
  position: relative;
  
  .map-controls {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.6);
    padding: 10px;
    border-radius: 4px;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);

    .control-title {
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 8px;
      padding-left: 4px;
      border-left: 3px solid #1890ff;
    }

    .control-divider {
      height: 1px;
      background: rgba(255, 255, 255, 0.1);
      margin: 8px 0;
    }

    .ml-2 {
      margin-left: 0;
      width: 100%;
      
      :deep(.el-button) {
        flex: 1;
        margin-left: -1px;
        background: rgba(24, 144, 255, 0.1);
        border-color: rgba(24, 144, 255, 0.3);
        color: #fff;
        
        &:hover, &:focus {
          background: rgba(24, 144, 255, 0.2);
          border-color: rgba(24, 144, 255, 0.4);
          color: #fff;
        }
        
        &.is-active {
          background: #1890ff;
          border-color: #1890ff;
          color: #fff;
        }
      }
    }
  }

  .map-legend {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.6);
    padding: 5px;
    border-radius: 4px;
    color: #fff;

    .legend-title {
      font-size: 14px;
      margin-bottom: 8px;
      font-weight: 500;
      padding-left: 4px;
      border-left: 3px solid #1890ff;
    }

    .legend-items {
      .legend-item {
        display: flex;
        align-items: center;
        margin: 4px 0;

        .color-block {
          width: 16px;
          height: 16px;
          margin-right: 8px;
          border-radius: 2px;

          &.positive { background: #91cc75; }
          &.negative { background: #ee6666; }
          &.neutral { background: #5470c6; }
          &.high { background: #f5222d; }
          &.medium { background: #faad14; }
          &.low { background: #52c41a; }
          &.cluster { background: #722ed1; }
          &.scatter { background: #13c2c2; }
        }
      }
    }
  }

  .map-info {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.6);
    padding: 10px;
    border-radius: 4px;
    color: #fff;
    min-width: 180px;

    .info-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
      padding-left: 4px;
      border-left: 3px solid #1890ff;
      padding-bottom: 5px;
      display: flex;
      align-items: center;
      
      &::after {
        content: '';
        flex: 1;
        height: 1px;
        background: rgba(255, 255, 255, 0.2);
        margin-left: 10px;
      }
    }

    .info-content {
      .info-item {
        display: flex;
        justify-content: space-between;
        margin: 5px 0;

        .label {
          color: #999;
        }

        .value {
          font-weight: bold;
        }
      }
    }
  }
  
  .map {
    height: 100%;
  }
}
</style> 